<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Card from "./Card.svelte";
    import { fn } from "storybook/test";
    import { BothSide } from "../BothSide";
    import { Space } from "../Space";
    import { Button } from "../Button";
    import { Avatar } from "../Avatar";
    import { Link, Text } from "../Typography";
    import avatar from "../../assets/avatar.png";
    import img from "../../assets/card-cover.webp";
    import { TabPane, Tabs } from "../Tabs";

    const { Story } = defineMeta({
        title: "Components/Views/Card",
        component: Card,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Card title="Title">
            <div>content!content!content!</div>
            <div>content!content!content!</div>
            <div>content!content!content!</div>
            <div>content!content!content!</div>
        </Card>
    {/snippet}
</Story>

<Story name="Borderless" args={{ bordered: false }}>
    {#snippet template(args)}
        <div style="width: 300px; background: #666; padding: 20px">
            <Card title="Title">
                <div>content!content!content!</div>
                <div>content!content!content!</div>
                <div>content!content!content!</div>
                <div>content!content!content!</div>
            </Card>
        </div>
    {/snippet}
</Story>

<Story name="Simple">
    {#snippet template(args)}
        <Card style="max-width: 300px">
            <div>简洁卡片</div>
        </Card>
    {/snippet}
</Story>

<Story name="Shadow" args={{ rised: true }}>
    {#snippet template(args)}
        <Card title="Title" style="max-width: 300px" {...args}>
            <div>鼠标hover{args.rised ? "有" : "无"}阴影</div>
            <div>鼠标hover{args.rised ? "有" : "无"}阴影</div>
            <div>鼠标hover{args.rised ? "有" : "无"}阴影</div>
        </Card>
    {/snippet}
</Story>

<Story name="Cover">
    {#snippet template(args)}
        <Card style="max-width: 300px">
            {#snippet title()}
                <BothSide>
                    <Space align="center">
                        <Avatar src={avatar} />
                        <Space dir="v" size={2}>
                            <Text strong>案例</Text>
                            <Text color="Secondary">描述</Text>
                        </Space>
                    </Space>
                    <Link>More</Link>
                </BothSide>
            {/snippet}
            {#snippet cover()}
                <img src={img} alt="cover" />
            {/snippet}
            {#snippet footer()}
                <Space justify="end">
                    <Button theme="light">文字提示</Button>
                    <Button type="primary">开始使用</Button>
                </Space>
            {/snippet}
            卡片内容
        </Card>
    {/snippet}
</Story>

<Story name="Tabs">
    {#snippet template(args)}
        <Card>
            <Tabs activeName="tab1">
                <TabPane title="标签一" name="tab1">标签一的内容</TabPane>
                <TabPane title="标签二" name="tab2">标签二的内容</TabPane>
                <TabPane title="标签三" name="tab3">标签三的内容</TabPane>
            </Tabs>
        </Card>
    {/snippet}
</Story>
